<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        padding: 0;
        margin: 0;
        font-size: 14px;
        color: #000000;
      }
      table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;
      }
      thead {
        background: #3d444c;
        color: #ffffff;
      }
      td,
      th {
        border: 1px solid #e1e1e1;
        padding: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table id="jsTrolley">
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>产品1</td>
          <td>10.00</td>
          <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
          <td>产品2</td>
          <td>30.20</td>
          <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
          <td>产品3</td>
          <td>20.50</td>
          <td><a href="javascript:void(0);">删除</a></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>总计</th>
          <td colspan="2">60.70(3件商品)</td>
        </tr>
      </tfoot>
    </table>
    <script>
      function add(items) {
        var tbody = document.getElementsByTagName('tbody')
        var tfoot = document.getElementsByTagName('tfoot')
        let count = tbody.children.length
        let price = parseFloat(tfoot.innerText.match(/\d+.\d+/)[0])
        // 新增行
        var tr = document.createElement('tr')
        tr.innerHTML = `<td>${item.name}</td><td>${item.price}</td><td><a href="javascript:void(0);">删除</a></td>`
        tbody.appendChild(tr)
        tfoot.innerHTML = `<tr><th>总计</th><td colspan="2">${price.toFixed(2)}(${count}件商品)</td></tr>`
      }

      function bind() {
        var tbody = document.getElementsByTagName('tbody')[0]
        var tfoot = document.getElementsByTagName('tfoot')
        tbody.onclick = (e) => {
          if (e.target.tagName === 'A') {
            let price = parseFloat(e.target.parentElement.parentElement.innerHTML.match(/\d+.\d+/)[0])
            let total = tfoot.innerHTML.match(/\d+.\d+/)[0]
            e.target.parentElement.parentElement.remove()
            tfoot.innerHTML = `<tr><th>总计</th><td colspan="2">${(total - price).toFixed(2)}(${num - 1}件商品)</td></tr>`
          }
        }
      }
      bind()
    </script>
  </body>
</html>
